<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Cargo Live Map</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <link rel="stylesheet" href="#{resource['/css/dd.css']}"/>

    <link rel="stylesheet"
          href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"/>

    <link rel="stylesheet"
          href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
          integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
          crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
            integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
            crossorigin=""/>

    <script type="text/javascript">
        //<![CDATA[
        function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(
                /\+/g, ' '));
        };
        //]]>
    </script>
    <script type="text/javascript">
        // TODO See if there is a service to get the latitude/longitude
        // data from.
        const latitude = {
            "XXXXX": 38.4667,
            "CNHKG": 22,
            "AUMEL": -38,
            "SESTO": 59,
            "FIHEL": 60,
            "USCHI": 42,
            "JNTKO": 36,
            "DEHAM": 54,
            "CNSHA": 31,
            "NLRTM": 52,
            "SEGOT": 58,
            "CNHGH": 30,
            "USNYC": 41,
            "USDAL": 33
        };

        const longitude = {
            "XXXXX": -28.4,
            "CNHKG": 114,
            "AUMEL": 145,
            "SESTO": 18,
            "FIHEL": 25,
            "USCHI": -88,
            "JNTKO": 140,
            "DEHAM": 10,
            "CNSHA": 121,
            "NLRTM": 5,
            "SEGOT": 12,
            "CNHGH": 120,
            "USNYC": -74,
            "USDAL": -97
        };

        //  load the icons for the map
        const greenIcon = new L.Icon(
            {
                iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
                shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
                iconSize: [25, 41],
                iconAnchor: [12, 41],
                popupAnchor: [1, -34],
                shadowSize: [41, 41]
            });

        const greyIcon = new L.Icon(
            {
                iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-grey.png',
                shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
                iconSize: [25, 41],
                iconAnchor: [12, 41],
                popupAnchor: [1, -34],
                shadowSize: [41, 41]
            });

        const redIcon = new L.Icon(
            {
                iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
                shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
                iconSize: [25, 41],
                iconAnchor: [12, 41],
                popupAnchor: [1, -34],
                shadowSize: [41, 41]
            });

        const blackIcon = new L.Icon(
            {
                iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-black.png',
                shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
                iconSize: [25, 41],
                iconAnchor: [12, 41],
                popupAnchor: [1, -34],
                shadowSize: [41, 41]
            });

        const goldIcon = new L.Icon(
            {
                iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-gold.png',
                shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
                iconSize: [25, 41],
                iconAnchor: [12, 41],
                popupAnchor: [1, -34],
                shadowSize: [41, 41]
            });

        const colorCodes = {
            "NOT_ROUTED": greyIcon,
            "NOT_RECEIVED": goldIcon,
            "IN_PORT": greenIcon,
            "ONBOARD_CARRIER": greenIcon,
            "MISDIRECTED": redIcon,
            "AT_DESTINATION": blackIcon,
            "CLAIMED": blackIcon,
            "UNKNOWN": redIcon
        };
    </script>
</head>
<body style="background-color: white">
<div>
    <div id="map"
         style="height: 600px; border: #FFF; border-style: solid; border-width: 8px;">
    </div>
</div>

<script type="text/javascript">
    window.onload = function init() {
        var statusCode = getUrlParameter('statusCode');
        var originCode = getUrlParameter('originCode');
        var originName = getUrlParameter('originName');
        var destinationCode = getUrlParameter('destinationCode');
        var destinationName = getUrlParameter('destinationName');
        var lastKnownLocationCode = getUrlParameter('lastKnownLocationCode');
        var lastKnownLocationName = getUrlParameter('lastKnownLocationName');

        const originCoordinate = {
            position: {
                lon: longitude[originCode]
                    + (Math.floor((Math.random() * 3) - 3)),
                lat: latitude[originCode]
                    + (Math.floor((Math.random() * 3) - 3))
            },
            style: blackIcon
        };

        const destinationCoordinate = {
            position: {
                lon: longitude[destinationCode]
                    + (Math.floor((Math.random() * 3) - 3)),
                lat: latitude[destinationCode]
                    + (Math.floor((Math.random() * 3) - 3))
            },
            style: blackIcon
        };

        const lastKnownCoordinate = {
            position: {
                lon: longitude[lastKnownLocationCode]
                    + (Math.floor((Math.random() * 3) - 3)),
                lat: latitude[lastKnownLocationCode]
                    + (Math.floor((Math.random() * 3) - 3))
            },
            style: colorCodes[statusCode]
        };

        const map = L.map('map').setView({
            lon: 0,
            lat: 0
        }, 2);

        // add the OpenStreetMap tiles
        L
            .tileLayer(
                'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                {
                    maxZoom: 19,
                    attribution: '&#xA9;; &lt;a href="https://openstreetmap.org/copyright">OpenStreetMap contributors&lt;/a>'
                }).addTo(map);

        // show the scale bar on the lower left corner
        L.control.scale().addTo(map);

        L.marker(originCoordinate['position'], {
            icon: originCoordinate.style
        }).bindTooltip('Origin: ' + originName).addTo(map);

        L.marker(destinationCoordinate['position'], {
            icon: destinationCoordinate.style
        }).bindTooltip('Destination: ' + destinationName).addTo(map);

        L.marker(lastKnownCoordinate['position'], {
            icon: lastKnownCoordinate.style
        }).bindTooltip('Last known location: ' + lastKnownLocationName)
            .addTo(map);
    }
</script>
</body>
</html>
